
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .wrap{
            width: 260px;
            height: 100%;
            background-color:rgb(48,65,86);
        }
        .head a{
            text-decoration:none;
            display: block;
            width: 260px;
            height: 60px;
            background-color: rgb(48,65,86);
            line-height: 60px;
            text-align: center;
            color:  rgb(191, 203, 217);
            font-size: 20px;
        }

        .nav{
            width: 250px;
            margin: 10px 5px;
        }
        .nav-list h2{
            position: relative;
            width: 100%;
            height: 50px;
            cursor: pointer;

            line-height: 50px;
            text-align: center;
            color:  rgb(191, 203, 217);
            font-size: 20px;
            transform: 0.5s;  /* css3过渡效果 */
        }
        .nav-list h2.on{
            background-color: rgb(33, 48, 65);
            color: rgb(191, 203, 217);
        }
        .nav-list{
            margin-bottom: 20px;
        }
        .nav-list i{
            position: absolute;
            right: 10px;
            top: 16px;
            border: 8px solid transparent;
            border-left-color: rgb(191, 203, 217);
            transform-origin: 1px 7px;  /* 变换的中心点 */
            transform: rotate(0deg);  /* css3变换属性  旋转 */
            transition: 0.5s;
        }
        .nav-list i.on{
            transform: rotate(90deg);
        }
        .hide{
            overflow: hidden;
            height: 0;
            transform: 0.5s;  /* css3过渡效果 */
        }
        .hide a{
            text-decoration:none;
            display: block;
            padding: 10px 0;
            background-color: rgb(36, 52, 70);
            border-bottom: 1px solid rgb(58, 65, 70);
            color:  rgb(191, 203, 217);
            text-align: center;

            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="head">
        <a href="right.html" target="right">首页</a>
    </div>
    <div class="nav">
        <ul>
            <li class="nav-list">
                <h2>
                    <i></i>
                    个人中心
                </h2>
                <div class="hide">
                    <a href="model-1/reader_books_list.html" target="right">借书列表</a>
                    <a href="model-1/destroy_books_msg.html" target="right">书籍损毁</a>
                    <a href="model-1/reader_cancel.html" target="right">用户注销</a>
                </div>
            </li>
            <li class="nav-list">
                <h2>
                    <i></i>
                    充值管理
                </h2>
                <div class="hide">
                    <a href="model-2/reader_deposit.html" target="right">
                        充值
                    </a>
                </div>
            </li>
            <li class="nav-list">
                <h2>
                    <i></i>
                    留言
                </h2>
                <div class="hide">
                    <a href="model-3/reader_Mes.html" target="right">
                        <cite>留言表</cite>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
    var aList = document.querySelectorAll('.nav-list h2');
    var aHide = document.querySelectorAll('.hide');
    var aIcon = document.querySelectorAll('.nav-list i');
    var lastIndex = 0;  //保存上一次的下标
    for (var i = 0; i < aList.length; i++) {
        aList[i].index = i;  //自定义属性保存下标
        aList[i].isClick = false; //初始没有被点击
        aList[i].onclick = function(){  //点击事件执行函数
            //清除上一次的样式 lastIndex上一次的下标
            aHide[lastIndex].style.height = '0';
            aList[lastIndex].className = ''; //变换颜色
            aIcon[lastIndex].className = ''; //改变小图标的角度
            if (this.isClick) {  //被点击了
                this.isClick = false;
            }else{  //没有被点击
                //设置当前样式 this.index  当前的下标
                aHide[this.index].style.height = '180px';  //设置css属性  变换hide的高度
                aList[this.index].className = 'on';  //变换颜色
                aIcon[this.index].className = 'on';  //改变小图标的角度
                //保存上一次下标
                aList[lastIndex].isClick = false;
                this.isClick = true;
                lastIndex = this.index; //保存上一次的样式
            };
        }
    };
</script>
</body>
</html>
